<template>
  <MainFrame>
    <div slot='content'>
      <div class="top-title">
        换相器实时数据
      </div>
      <div class="top" style="margin: 10px 20px">
        <el-button type="primary" @click="machine" icon="el-icon-document">台账</el-button>
        <el-button type="primary" @click="back" icon="el-icon-back">返回</el-button>
        <el-row type="flex">
          <el-col :span="3">归属地：{{ location }}</el-col>
          <el-col :span="3">台区号：{{ areaNo }}</el-col>
          <el-col :span="3">换相器台数：{{ totalMachine }}</el-col>
        </el-row>
      </div>
      <div class="page">
        <el-table :data="items" border style="width: 100%" stripe :default-sort="{prop: 'machineNo'}">
          <!-- <el-table-column prop="id" label="id" width="50">
          </el-table-column> -->
          <!-- <el-table-column prop="location" label="归属地" width="100">
          </el-table-column>
          <el-table-column prop="areaNo" label="台区号" width="100">
          </el-table-column> -->
          <el-table-column prop="machineNo" label="换相器号" width="90">
          </el-table-column>
          <el-table-column prop="WORKL" label="工作相" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.WORKL==0">D（脱网状态）</span>
              <span v-if="scope.row.WORKL==1">A</span>
              <span v-if="scope.row.WORKL==2">B</span>
              <span v-if="scope.row.WORKL==3">C</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="最后通讯时间" width="200">
          </el-table-column>
          <el-table-column prop="STAT" label="状态" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.STAT==0">运行正常</span>
              <span v-if="scope.row.STAT==1">过载闭锁</span>
              <span v-if="scope.row.STAT==2">过压闭锁</span>
              <span v-if="scope.row.STAT==3">超温闭锁</span>
              <span v-if="scope.row.STAT==4">禁止换相</span>
              <span v-if="scope.row.STAT==5">缺相闭锁</span>
              <span v-if="scope.row.STAT==6">换相失败</span>
              <span v-if="scope.row.STAT==128">通信超时</span>
            </template>
          </el-table-column>
          <el-table-column prop="I" label="负载电流" width="80">
            <template slot-scope="scope">
              {{ scope.row.I ? scope.row.I : 0 }}A
            </template>
          </el-table-column>
          <el-table-column prop="Ua" label="Ua" width="80">
            <template slot-scope="scope">
              {{ scope.row.Ua ? scope.row.Ua : 0 }}V
            </template>
          </el-table-column>
          <el-table-column prop="Ub" label="Ub" width="80">
            <template slot-scope="scope">
              {{ scope.row.Ub ? scope.row.Ub : 0 }}V
            </template>
          </el-table-column>
          <el-table-column prop="Uc" label="Uc" width="80">
            <template slot-scope="scope">
              {{ scope.row.Uc ? scope.row.Uc : 0 }}V
            </template>
          </el-table-column>
          <el-table-column prop="PF" label="PF" width="80">
          </el-table-column>
          <!-- <el-table-column prop="activeStatus" label="激活状态" width="100">
            <template slot-scope="scope">
              {{scope.row.activeStatus==1?"已激活":"未激活"}}
            </template>
          </el-table-column>
          <el-table-column prop="installAddress" label="安装地点" width="200">
          </el-table-column> -->
          <el-table-column width="100" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" round @click="changeRecord(scope.row)">换相记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </MainFrame>
</template>
<script>
import MainFrame from '@/components/MainFrame';
import utils from '../ttJs/utils.js'
import { validateData } from '../ttJs/utils.js'
export default {
  components: {
    MainFrame,
  },
  data() {
    return {
      items: [],
      areaId: null,
      machineId: null,
      location: '',
      areaNo: '',
      id_of_setinterval: 0,
      totalMachine: 0
    };
  },
  /*metaInfo: {
    meta: [
      { 'http-equiv': 'refresh', content: '3' }
    ]
  },*/
  mounted: function() {
    this.areaId = this.$route.query.id;
    this.getItems();
    // this.id_of_setinterval = window.setInterval(this.getItems, 96000);
  },
  beforeDestroy: function() {
    // window.clearInterval(this.id_of_setinterval);
  },
  methods: {
    getItems() {
      var self = this;
      var url = '/yitai/admin/machine';
      var params = {
        areaId: this.areaId,
        isOnline: true
      };
      var success = function(response) {
        self.items = response.info;
        if (response.info.length > 0) {
          self.location = response.info[0].location;
          self.areaNo = response.info[0].areaNo;
        }
        self.totalMachine = response.info.length;
        // self.items = [];
        /*for (var i = 0; i < response.info.length; i ++) {
          if (self.items[i].STAT == 0) {
            self.totalMachine ++;
          }
          if (response.info[i].activeStatus == 1) {
            self.items.push(response.info[i]);
            self.totalMachine ++;
          }
        }*/
      }
      var fail = function() {};
      var complete = function() {};
      utils.request(url, params, success, fail, complete);
    },
    machine() {
      this.$router.push({ name: 'Machine', query: { id: this.areaId } })
    },
    changeRecord(item) {
      this.$router.push({ name: 'MachineChangeRecord', query: { id: item.id } })
    },
    back() {
      window.history.back();
    }
  }
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  font-size: 18px;
  font-weight: bold;
  padding: 0 20px;
}

.page {
  position: relative;
  overflow: hidden;
  padding: 20px;
  .page-content {}
}

</style>
